<template>
  <div class="big-box">
     
    
    <!-- <button @click="loginOut">退 出</button> -->

    <div class="meview">
    <!-- 头部 -->
    <div class="maoyan">
      <div class="maoyan-l" @click="$router.back()">
        <img src="../assets/返回白.png" alt="" />
      </div>
      <div class="maoyan-c"></div>
      <div class="maoyan-r">
        <img src="../assets/消息.png" alt="" />
        <img src="../assets/设置.png" alt="" />
      </div>
    </div>
    
    <!-- 个人资料 -->
    <div class="met">
      <!-- 头像 -->
      <div class="mett">
        <img src="../assets/banner1.jpg" alt="" />
        <div class="met-name">
          <p class="name">{{userNick}}</p>
          <div class="vip">普通用户 </div>
         <div class="vip11"> {{isLogin === 1 ? '已登录' : '未登录'}}</div>
        </div>
      </div>
      <!-- 想看 -->
      <div class="look">
        <div class="looks">
          <div class="look-l look-ll">想看 0</div>
          <div class="look-r">
            <img src="../assets//向右1.png" alt="" />
          </div>
        </div>
        <div class="zhong"></div>
        <div class="looks">
          <div class="look-l">看过 0</div>
          <div class="look-r look-rr">
            <img src="../assets//向右1.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 我的订单 -->
      <div class="order">
        <div class="order-t">我的订单</div>
        <div class="order-b">
          <div class="icon">
            <img src="../assets/电影票.png" alt="" />
            <p>电影票</p>
          </div>
          <div class="icon">
            <img src="../assets/演出票.png" alt="" />
            <p>演出票</p>
          </div>
          <div class="icon">
            <img src="../assets/观影模式.png" alt="" />
            <p>在线观影</p>
          </div>
          <div class="icon">
            <img src="../assets/周边购物.png" alt="" />
            <p>周边</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 我的资产 -->
    <div class="property">
      <div class="property-t">我的资产</div>
      <div class="property-b">
        <div class="roll iocn-y">
          <div class="text text-y">优惠券</div>
          <div class="t t-y">0</div>
        </div>
        <div class="roll iocn-z">
          <div class="text text-z">折扣卡</div>
          <div class="t t-z">开卡立省</div>
        </div>
        <div class="roll iocn-m">
          <div class="text text-m">猫享卡</div>
          <div class="t t-m">去绑卡</div>
        </div>
        <div class="roll iocn-b">
          <div class="text text-b">喵币</div>
          <div class="t t-b">0</div>
        </div>
      </div>
    </div>
    
    <!-- 我的服务 -->
    <div class="serve">
      <div class="serve-t">我的服务</div>
      <div class="serve-b">
        <div class="s-icon">
          <img src="../assets/认证.png" alt="" />
          <div class="s-text">猫眼号认证</div>
        </div>
        <div class="s-icon">
          <img src="../assets/限时购.png" alt="" />
          <div class="s-text">限时购周边</div>
        </div>
        <div class="s-icon">
          <img src="../assets/招聘.png" alt="" />
          <div class="s-text">猫眼招人啦</div>
        </div>
        <div class="s-icon">
          <img src="../assets/包场.png" alt="" />
          <div class="s-text">一键包场</div>
        </div>
        <div class="s-icon">
          <img src="../assets/银行.png" alt="" />
          <div class="s-text">银行活动</div>
        </div>
        <div class="s-icon">
          <img src="../assets/公告.png" alt="" />
          <div class="s-text">平台公告</div>
        </div>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
 
  computed: {
    ...mapState(['isLogin', 'userNick', 'likeList'])
  },
  methods: {
    ...mapMutations(['loginOut'])
  }
}
</script>


<style lang="less">
.meview {
  .maoyan {
    padding: 6px;
    background-color: red;
    height: 38px;
    width: 363px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .maoyan-l {
      width: 100px;
      height: 38px;
      img {
        margin-top: 10px;
        width: 21px;
        height: 21px;
      }
    }

    .maoyan-c {
      font-size: 18px;
      color: #fff;
      width: 163px;
      height: 38px;
      text-align: center;
      line-height: 38px;
    }

    .maoyan-r {
      width: 100px;
      height: 38px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
        margin-right: 10px;
      }
    }
  }

  .met {
    background: linear-gradient(red, rgb(247, 106, 106), #fff);
    .mett {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .met-name {
        .name {
          color: #fff;
          font-weight: 600;
          font-size: 14px;
        }
        .vip {
          width: 100%;
          font-size: 12px;
          color: #fff;
          height: 30px;
          width: 60px;
          margin-top: 5px;
          border-radius: 14px;
          line-height: 30px;
          background: rgb(255, 4, 4);
          text-align: center;
          font-weight: 600;
          box-shadow: 0px 0px 1px #f3f0f0;
        }
      }
    }
    .look {
      display: flex;
      height: 70px;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      // opacity: 0.1;
      margin: 5px 15px;
      border-radius: 20px;

      .looks {
        color: rgb(129, 120, 120);
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 172px;
        .look-ll {
          margin-left: 10px;
        }
        .look-rr {
          margin-right: 10px;
        }
        .look-r {
          display: flex;
          align-items: center;
          img {
            width: 12px;
            height: 15px;
          }
        }
      }
      .zhong {
        width: 1px;
        height: 30px;
        background: gainsboro;
        margin: 0 10px;
      }
    }
    .order {
      margin: 10px 15px;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0px 2px 3px #f3f0f0;
      .order-t {
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 600;
      }
      .order-b {
        display: flex;
        justify-content: space-around;
        .icon {
          text-align: center;
          margin-bottom: 15px;
          margin-top: 5px;
          img {
            width: 30px;
            height: 30px;
          }
          p {
            margin-top: 5px;
            font-size: 13px;
          }
        }
      }
    }
  }

  .property {
    margin: 20px 15px;
    border-bottom: 1px solid #f3ecec;
    padding-bottom: 18px;
    .property-t {
      padding-bottom: 15px;
      font-size: 16px;
      font-weight: 600;
    }
    .property-b {
      display: flex;
      justify-content: space-between;
      .roll {
        width: 80px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 13px;

        &.iocn-y {
          background: url(../assets/优惠券背景.png) no-repeat;
          background-size: cover;
          border: 1px solid pink;
        }
        &.iocn-z {
          background: url(../assets/折扣卡背景.png) no-repeat;
          background-size: cover;
          border: 1px solid rgb(228, 228, 153);
        }
        &.iocn-m {
          background: url(../assets/猫享卡背景.png) no-repeat;
          background-size: cover;
          border: 1px solid rgb(113, 202, 230);
        }
        &.iocn-b {
          background: url(../assets/喵币背景.png) no-repeat;
          background-size: cover;
          border: 1px solid #e6cba2;
        }
        .text {
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 35px;
          font-size: 13px;
          font-weight: 600;
          &.text-y {
            color: red;
          }
          &.text-z {
            color: orange;
          }
          &.text-m {
            color: rgb(77, 77, 212);
          }
          &.text-b {
            color: rgb(190, 21, 21);
          }
        }
        .t {
          line-height: 0;
          font-size: 12px;
          font-weight: 600;
          opacity: 0.5;
          &.t-y {
            color: red;
          }
          &.t-z {
            color: orange;
          }
          &.t-m {
            color: rgb(77, 77, 212);
          }
          &.t-b {
            color: rgb(190, 21, 21);
          }
        }
      }
    }
  }

  .serve {
    margin: 20px 15px;
    border-bottom: 1px solid #f3ecec;
    padding-bottom: 10px;
    .serve-t {
      padding-bottom: 15px;
      font-size: 16px;
      font-weight: 600;
    }
    .serve-b {
      display: flex;
      flex-wrap: wrap;
      .s-icon {
        width: 70px;
        text-align: center;
        margin-right: 16px;
        margin-bottom: 20px;
        img {
          width: 45px;
          height: 45px;
          margin-bottom: 5px;
        }
        .s-text {
          font-size: 13px;
          font-weight: bold;
          color: #666666;
        }
      }
    }
  }
}
</style>